<template>
  <div class="app-container">
    <el-form
        class="dialog-form"
        :rules="rules"
        ref="dataForm1"
        :model="temp"
        label-position="left"
        label-width="120px"
      >
      <el-tabs type="border-card">
        <el-tab-pane label="基本信息">
          <el-row>
            <el-col :span="8">
              <el-form-item label="项目名称" prop="projectName">
                <el-input v-model="temp.projectName" placeholder="项目名称" style="width:300px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="项目类型" prop="projectType">
                <el-select v-model="temp.projectType" placeholder="请选择">
                  <el-option value="1" label="固定收益理财"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="项目总金额" prop="totalAmount">
                <el-input v-model="temp.totalAmount" placeholder="项目总金额" style="width:300px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="最低投资额度" prop="minLimitAmount">
                <el-input v-model="temp.minLimitAmount" placeholder="最低投资额度" style="width:300px;">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="最高限额" prop="maxLimitAmount">
                <el-input v-model="temp.maxLimitAmount" placeholder="最高限额" style="width:300px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="投资期限(月)" prop="investMonth">
                <el-select v-model="temp.investMonth" placeholder="请选择">
                  <el-option v-for="(item,value) in investMonthItem" :key="value" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="预计收益" prop="planIncomeRate">
                  <el-input v-model.number="temp.planIncomeRate" placeholder="预计收益" style="width:300px;">
                    <template slot="append">%</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="投资总额" prop="totalInvestAmount">
                  <el-input v-model="temp.totalInvestAmount" placeholder="投资总额" style="width:300px;">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="募集期(天)" prop="collectDays">
                  <el-input-number v-model="temp.collectDays" :min="1" label="募集期"></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="项目标签" prop="projectTag">
                  <el-input v-model="temp.projectTag" placeholder="项目标签" style="width:300px;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="管理费类型"  prop="manageFeeType">
                  <el-radio-group v-model="temp.manageFeeType">
                    <div style="display:flex;">
                      <div>
                        <el-radio
                          v-for="(item,value) in manageFeeTypeItems"
                          :key="value"
                          :label="value"
                          :value="value"
                          style="display:flex;"
                        >{{item}}</el-radio>
                      </div>
                      <el-input v-model="temp.manageFeeRate" v-if="temp.manageFeeType === '1'" placeholder="管理费比例" style="width:300px;"></el-input>
                      <el-input v-model="temp.manageFeeAmount" v-if="temp.manageFeeType === '2'" placeholder="固定管理费金额" style="width:300px;"></el-input>
                    </div>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="是否可转让"  prop="transferFlag">
                  <el-radio-group v-model="temp.transferFlag">
                    <el-radio
                        v-for="(item,value) in transferFlagItems"
                        :key="value"
                        :label="value"
                        :value="value"
                      >{{item}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
        </el-tab-pane>
        
        <el-tab-pane label="推荐理由">
          <div>
            <h4>推荐理由</h4>
          </div>
            <el-form-item
              v-for="(item, index) in recoValidateForm"
              :key="index"
              class="item"
            >
              <el-form-item label="图标" prop="recoIcon">
                <div style="display:flex;">
                  <el-input v-model="item.recoIcon" placeholder="标题" style="width:300px;"></el-input>
                  <el-button @click.prevent="recoRemoveDomain(item)">删除</el-button>
                </div>
              </el-form-item>
              <el-form-item label="标题" prop="recoTitle">
                <el-input v-model="item.recoTitle" placeholder="标题" style="width:300px;"></el-input>
              </el-form-item>
              <el-form-item label="说明" prop="recoDesc">
                <el-input v-model="item.recoDesc"  type="textarea" rows="5" placeholder="说明" style="width:500px;"></el-input>
              </el-form-item>
              <!-- <el-form-item style="padding-left:300px;">
                <el-button @click.prevent="recoRemoveDomain(item)">删除</el-button>
              </el-form-item> -->
            </el-form-item>
            <div class="btn">
              <el-button type="primary" size="mini" @click="recoAddDomain" class="jixuBtn">+继续添加</el-button>
            </div>
            <div class="quill-wrap" style="height:350px;width:100%;margin-top:50px;">
              <quill-editor
                style="height:300px;"
                v-model="temp.recommendDesc "
                ref="myQuillEditor"
                :options="editorOption"
              ></quill-editor>
            </div>
        </el-tab-pane>

        <el-tab-pane label="基金概况">
          <div>
            <h4>基金概况</h4>
          </div>
            <el-form-item
              v-for="(item, index) in dynamicValidateForm"
              :key="index"
              class="item"
            >
              <div style="display: flex;">
                <el-form-item label="标题" prop="title">
                  <el-input v-model="item.introTitle" placeholder="标题" style="width:300px;"></el-input>
                </el-form-item>
                <el-form-item style="padding-left:300px;">
                  <el-button @click.prevent="removeDomain(item)">删除</el-button>
                </el-form-item>
              </div>
              <el-form-item label="说明" prop="sort">
                <el-input v-model="item.introDesc" type="textarea" rows="5" style="width:500px;" placeholder="说明" ></el-input>
              </el-form-item>
            </el-form-item>
            <div class="btn">
              <el-button type="primary" size="mini" @click="addDomain">+继续添加</el-button>
            </div>
        </el-tab-pane>

        <el-tab-pane label="资产分布">
          <div class="label-title">资产分布图文详情编辑</div>
          <div class="quill-wrap" style="height:350px;width:100%">
              <quill-editor
                style="height:300px;"
                v-model="temp.assetDesc "
                ref="myQuillEditor"
                :options="editorOption"
              ></quill-editor>
            </div>
        </el-tab-pane>
        <el-tab-pane label="销售文件">
          <div class="label-title">销售文件图文详情编辑</div>
          <div class="quill-wrap" style="height:350px;width:100%">
              <quill-editor
                style="height:300px;"
                v-model="temp.saleDocDesc "
                ref="myQuillEditor"
                :options="editorOption"
              ></quill-editor>
            </div>
        </el-tab-pane>
        <el-tab-pane label="交易规则">
          <div class="label-title">交易规则图文详情编辑</div>
          <div class="quill-wrap" style="height:350px;width:100%">
              <quill-editor
                style="height:300px;"
                v-model="temp.saleRuleDesc "
                ref="myQuillEditor"
                :options="editorOption"
              ></quill-editor>
            </div>
        </el-tab-pane>
        <el-tab-pane label="风险提示">
          <div class="label-title">风险提示图文详情编辑</div>
          <div class="quill-wrap" style="height:350px;width:100%">
              <quill-editor
                style="height:300px;"
                v-model="temp.riskDesc "
                ref="myQuillEditor"
                :options="editorOption"
              ></quill-editor>
            </div>
        </el-tab-pane>
      </el-tabs>
      <el-form-item>
        <div class="submitBtn">
          <div class="submitBtn-item" @click="submitFormAction">提交</div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor, Quill } from "vue-quill-editor";

export default {
  data() {
    return {
      container: false,
      total: 0,
      dataForm:[],
      dynamicValidateForm:[{value:""}],
      recoValidateForm:[{value:""}],
      params: {
        pageNo: 1,
        pageSize: 20
      },
      investMonthItem:[1,3,6,9,12],
      transferFlagItems:{
        0:"否",
        1:"是"
      },
      manageFeeTypeItems:{
        1:"按融资比例收取",
        2:"按固定金额收取"
      },
      selectedDays: {
        "10": "10天",
        "20": "20天",
        "30": "30天"
      },
      cmsList: [],
      list: [],

      permissionsList: [{
        temp:{}
      }],
      assetDesc:"",

      temp: {
        collectDays:1,
        manageFeeType:'',
      },
      editorOption: {
        placeholder: "在这里输入内容",
        modules: {}
      },
      rules: {
        projectName: [
          {
            required: true,
            message: "项目名称",
            trigger: "change",
          }
        ],
        projectType: [
          { required: true, message: "项目类型", trigger: "change" }
        ],
        minLimitAmount: [
          { required: true, message: "最低投资额度", trigger: "change" }
        ],
        investMonth: [
          { required: true, message: "投资期限(月)", trigger: "change" }
        ],
        projectTag: [
          { required: true, message: "项目标签", trigger: "change" }
        ],
        manageFeeType: [
          { required: true, message: "管理费类型", trigger: "change" }
        ],
        totalInvestAmount: [
          { required: true, message: "投资总额", trigger: "change" }
        ],
        maxLimitAmount: [
          { required: true, message: "最高限额", trigger: "change" }
        ],
        planIncomeRate: [
          { required: true, message: "预计收益", trigger: "change" }
        ]
      }
    };
  },
  components: {
    quillEditor
  },
  created() {
  },
  methods: {
    // submitFund(){
    //   const postData=[];
    //   this.dynamicValidateForm.forEach((el, idx) => {
    //       Object.keys(el).forEach(k => {
    //           postData['introList[' + idx + '].' + k] = el[k]
    //       })
    //   })
    //  console.log(postData)
    // },
    removeDomain(item) {
      var index = this.dynamicValidateForm.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.splice(index, 1)
      }
    },
    recoRemoveDomain(item) {
      var index = this.recoValidateForm.indexOf(item)
      if (index !== -1) {
        this.recoValidateForm.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.push({});
    },
    recoAddDomain() {
      this.recoValidateForm.push({});
    },
    submitAssetDesc(){
        const postData = Object.assign({}, this.temp);
        let url = "/admin/finance_project/add";
        this.$post(url, postData)
          .then(data => {
            this.$$notify("操作成功");
            this.dialogFormVisible = false;
          })
          .finally(err => {
            this.submiting = false;
          });
    },
    submitFormAction() {

      this.$refs["dataForm1"].validate(valid => {
        if (valid) {
          this.submiting = true;
          const postData = Object.assign({}, this.temp);
          // if(this.dynamicValidateForm){
            this.dynamicValidateForm.forEach((el, idx) => {
                Object.keys(el).forEach(k => {
                    postData['introList[' + idx + '].' + k] = el[k]
                })
            })
          // }
          this.recoValidateForm.forEach((el, idx) => {
              Object.keys(el).forEach(k => {
                  postData['recoList[' + idx + '].' + k] = el[k]
              })
          })
         
          let url = "/admin/finance_project/add";
          //   if (this.isEditing) {
          //     url = "/admin/cms_category/modify";
          //   }
          this.$post(url, postData)
            .then(data => {
              this.$$notify("操作成功");
              this.dialogFormVisible = false;
            })
            .finally(err => {
              this.submiting = false;
            });
        }
      });
    }
  }
};
</script>
<style>
.submitBtn{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.submitBtn-item{
  width: 300px;
  text-align: center;
  border: 1px solid #ccc;
  padding: 0px 20px;
  border-radius: 30px;
}
.label-title{
  font-size: 18px;
  font-weight: 600;
  padding: 10px 0;
}
.btn{
  width: 100%;
  display: flex;
  justify-content: center;
}

.jixuBtn{
  display: flex;
  justify-content: center;
}
.item{
  /* display: flex; */
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}
.el-table td,
.el-table th {
  padding: 1px 0;
}
.el-table {
  font-size: 12px;
}
.opencolor {
  color: red;
}
.openSearch {
  /* width: 100px; */
  margin-bottom: 10px;
  padding-bottom: 5px;
  /* border-bottom: 1px solid #ccc; */
}
</style>
